<template>
    <lemon-common uri="logging" ref="commonRef" :search-form-model="searchFormModel" :search-form-item="searchFormItem" :sort="sort" :show-add="false" :show-edit="false" :show-enable="false" :show-unable="false" :show-del="false" :table-item="tableItem" :dialog-info-form-model="dialogInfoFormModel" :dialog-info-form-item="dialogInfoFormItem" dialogFormLabelWidth="100px">
        <template #searchItems>
            <el-form-item label="耗时范围">
                <el-col :span="11">
                    <el-input-number v-model="searchFormModel.minDuration" placeholder="请输入最小值" controls-position="right" clearable />
                </el-col>
                <el-col :span="2" style="text-align: center">
                    <span style="padding-left: 3px">~</span>
                </el-col>
                <el-col :span="11">
                    <el-input-number v-model="searchFormModel.maxDuration" placeholder="请输入最大值" controls-position="right" />
                </el-col>
            </el-form-item>
            <el-form-item label="时间范围">
                <el-col :span="11">
                    <el-date-picker v-model="searchFormModel.minCreateTime" type="datetime" placeholder="请选择开始时间" format="YYYY-MM-DD HH:mm:ss" value-format="x" />
                </el-col>
                <el-col :span="2" style="text-align: center">
                    <span style="padding-left: 3px">~</span>
                </el-col>
                <el-col :span="11">
                    <el-date-picker v-model="searchFormModel.maxCreateTime" type="datetime" placeholder="请选择结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="x" />
                </el-col>
            </el-form-item>
        </template>

        <!-- 导出按钮 -->
        <template #searchAfterBtn>
            <el-button type="success" size="default" :icon="Download" v-has-permission="'EXPORT'" @click="onExport">导出</el-button>
        </template>
    </lemon-common>
</template>

<script setup lang="ts">
import { reactive, h, inject, ref, onUnmounted } from "vue";
import { debounce } from "lodash-es";
import { dayjs, ElTag, type TagProps } from "element-plus";
import { Download } from "@element-plus/icons-vue";

//获取自定义全局方法
const { http } = inject<any>("method");

//公共组件ref
const commonRef: any = ref(null);

//搜索的form
const searchFormModel = reactive({
    code: null,
    uri: "",
    method: "",
    minDuration: null,
    maxDuration: null,
    minCreateTime: null,
    maxCreateTime: null,
});

//排序规则
const sort = reactive({ desc: "createTime" });

//请求方式选项
const methodOptions = [
    { label: "GET", value: "GET", type: "primary" },
    { label: "POST", value: "POST", type: "success" },
    { label: "PUT", value: "PUT", type: "warning" },
    { label: "DELETE", value: "DELETE", type: "danger" },
];

//请求方式选项
const methodFormat = (row: any, column: any) => {
    const value = methodOptions.filter((item) => item.value == row[column.property]);
    if (value && value.length > 0) {
        return h(ElTag, { type: value[0].type as TagProps["type"] }, () => value[0].label);
    }
    return "";
};

//搜索form子项
const searchFormItem = reactive({
    code: { label: "状态码", type: "number", controlsPosition: "right" },
    uri: { label: "请求地址", type: "input" },
    method: { label: "请求方式", type: "select", options: methodOptions },
});

//表格每一项
const tableItem = reactive([
    { prop: "ip", label: "IP地址", minWidth: "150" },
    { prop: "uri", label: "请求地址", minWidth: "300" },
    { prop: "content", label: "请求说明", minWidth: "300" },
    { prop: "method", label: "请求方式", minWidth: "100", formatter: methodFormat },
    { prop: "param", label: "参数", minWidth: "300" },
    { prop: "body", label: "请求体参数", minWidth: "300" },
    { prop: "duration", label: "耗时（毫秒）", minWidth: "120" },
    { prop: "code", label: "状态码", minWidth: "100" },
    { prop: "createTime", label: "请求时间", minWidth: "200", formatter: (row: any, column: any) => dayjs(parseInt(row[column.property])).format("YYYY-MM-DD HH:mm:ss") },
]);

//弹出框详情form
const dialogInfoFormModel = reactive({
    ip: null,
    uri: null,
    content: null,
    method: null,
    param: null,
    body: null,
    duration: null,
    code: null,
    createTime: null,
});

//弹出框详情form子项
const dialogInfoFormItem = reactive({
    ip: { label: "IP地址", type: "input", readonly: true },
    uri: { label: "请求地址", type: "input", readonly: true },
    content: { label: "请求说明", type: "input", readonly: true },
    method: { label: "请求方式", type: "input", readonly: true },
    param: { label: "参数", type: "textarea", rows: 5, readonly: true },
    body: { label: "请求体参数", type: "textarea", rows: 5, readonly: true },
    duration: { label: "耗时（毫秒）", type: "input", readonly: true },
    createTime: { label: "请求时间", type: "timestamp", readonly: true, style: { width: "100%" } },
});

//防抖导出
const onExport = debounce(async () => await http.export("/logging/export", commonRef.value?.params()), 200);

onUnmounted(() => {
    onExport.cancel();
});
</script>

<style scoped lang="less"></style>
